<template>
  <div class="equipment-item" :class="[`equipment-${type}`, `size-${size}`]">
    <!-- 装备图片 -->
    <div class="equipment-image">
      <n-image 
        :src="imageUrl" 
        :alt="item.object_name"
        :fallback-src="imageUrl"
        :preview-disabled="size === 'small'"
        :width="imageSize"
        :height="imageSize"
        object-fit="contain"
      />
      <!-- 等级标识 -->
      <div class="grade-badge" :style="{ backgroundColor: getGradeColor(item.grade) }">
        {{ item.grade }}
      </div>
    </div>

    <!-- 装备信息 -->
    <div class="equipment-info">
      <div class="equipment-name" :title="item.object_name">
        {{ item.object_name }}
      </div>
      
      <div v-if="size !== 'small'" class="equipment-details">
        <div class="equipment-category">
          {{ item.second_class_cn || item.primary_class }}
        </div>
        
        <div v-if="item.desc" class="equipment-desc" :title="item.desc">
          {{ truncateText(item.desc, 60) }}
        </div>
      </div>

      <!-- 价格信息 -->
      <div class="price-info">
        <div class="current-price">
          <span class="price-value">{{ item.formatted_price }}</span>
          <span v-if="!item.has_price_data" class="no-price-data">
            (无价格数据)
          </span>
        </div>
        
        <div v-if="item.has_price_data && size !== 'small'" class="price-change">
          <span 
            :class="getPriceChangeClass(item.price_change_24h)"
            class="change-value"
          >
            {{ formatPriceChange(item.price_change_24h, item.price_change_percent) }}
          </span>
        </div>
      </div>

      <!-- 物理属性（仅大尺寸显示） -->
      <div v-if="size === 'large'" class="physical-attrs">
        <n-space size="small">
          <n-tag size="tiny" type="info">{{ item.weight }}kg</n-tag>
          <n-tag size="tiny" type="info">{{ item.length }}×{{ item.width }}</n-tag>
        </n-space>
      </div>
    </div>

    <!-- 装备类型图标 -->
    <div class="type-icon">
      <n-icon :size="16" :color="getTypeColor(type)">
        <component :is="getTypeIcon(type)" />
      </n-icon>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, h } from 'vue'
import { NIcon } from 'naive-ui'
import type { TacticalItem } from '@/types/tactical'
import { getGradeColor, truncateText } from '@/utils/format'

// 自定义SVG图标组件
const WeaponIcon = () => h('svg', {
  viewBox: '0 0 24 24',
  fill: 'currentColor'
}, [
  h('path', {
    d: 'M20,4H16L14,6H10L8,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6A2,2 0 0,0 20,4M20,18H4V6H6.83L8.83,8H15.17L17.17,6H20V18Z'
  })
])

const AccessoryIcon = () => h('svg', {
  viewBox: '0 0 24 24',
  fill: 'currentColor'
}, [
  h('path', {
    d: 'M21,16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V7.5C3,7.12 3.21,6.79 3.53,6.62L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.79,6.79 21,7.12 21,7.5V16.5M12,4.15L5,8.09V15.91L12,19.85L19,15.91V8.09L12,4.15Z'
  })
])

const HelmetIcon = () => h('svg', {
  viewBox: '0 0 24 24',
  fill: 'currentColor'
}, [
  h('path', {
    d: 'M12,1A11,11 0 0,0 1,12A11,11 0 0,0 12,23A11,11 0 0,0 23,12A11,11 0 0,0 12,1M12,3A9,9 0 0,1 21,12A9,9 0 0,1 12,21A9,9 0 0,1 3,12A9,9 0 0,1 12,3M12,5A7,7 0 0,0 5,12A7,7 0 0,0 12,19A7,7 0 0,0 19,12A7,7 0 0,0 12,5Z'
  })
])

const ArmorIcon = () => h('svg', {
  viewBox: '0 0 24 24',
  fill: 'currentColor'
}, [
  h('path', {
    d: 'M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4M12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6Z'
  })
])

const BackpackIcon = () => h('svg', {
  viewBox: '0 0 24 24',
  fill: 'currentColor'
}, [
  h('path', {
    d: 'M4,7V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V7A2,2 0 0,0 18,5H16V4A2,2 0 0,0 14,2H10A2,2 0 0,0 8,4V5H6A2,2 0 0,0 4,7M10,4H14V5H10V4M6,7H18V20H6V7M8,9V11H16V9H8Z'
  })
])

interface Props {
  item: TacticalItem
  type: 'weapon' | 'accessory' | 'helmet' | 'armor' | 'backpack' | 'chest_rig'
  size?: 'small' | 'medium' | 'large'
}

const props = withDefaults(defineProps<Props>(), {
  size: 'medium'
})

// 计算属性
const imageUrl = computed(() => {
  return props.item.pic 
})

const fallbackImage = computed(() => '/images/item-placeholder.png')

const imageSize = computed(() => {
  switch (props.size) {
    case 'small': return 40
    case 'large': return 80
    default: return 60
  }
})

// 辅助函数
const getPriceChangeClass = (change: number) => {
  if (change > 0) return 'price-increase'
  if (change < 0) return 'price-decrease'
  return 'price-stable'
}

const formatPriceChange = (change: number, percent: number) => {
  const sign = change > 0 ? '+' : ''
  return `${sign}${change.toFixed(0)} (${percent.toFixed(1)}%)`
}

const getTypeIcon = (type: string) => {
  const iconMap = {
    weapon: WeaponIcon,
    accessory: AccessoryIcon,
    helmet: HelmetIcon,
    armor: ArmorIcon,
    backpack: BackpackIcon,
    chest_rig: ArmorIcon
  }
  return iconMap[type as keyof typeof iconMap] || AccessoryIcon
}

const getTypeColor = (type: string) => {
  const colorMap = {
    weapon: '#ff6b35',
    accessory: '#4ecdc4', 
    helmet: '#45b7d1',
    armor: '#96ceb4',
    backpack: '#feca57',
    chest_rig: '#ff9ff3'
  }
  return colorMap[type as keyof typeof colorMap] || '#999'
}
</script>

<style scoped>
.equipment-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background-color: var(--card-color);
  transition: all 0.2s ease;
  position: relative;
}

.equipment-item:hover {
  border-color: var(--primary-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.size-small {
  padding: 8px;
  gap: 8px;
}

.size-large {
  padding: 16px;
  gap: 16px;
}

.equipment-image {
  position: relative;
  flex-shrink: 0;
}

.grade-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
  color: white;
  border: 2px solid var(--card-color);
}

.equipment-info {
  flex: 1;
  min-width: 0;
}

.equipment-name {
  font-weight: 500;
  color: var(--text-color-1);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.size-small .equipment-name {
  font-size: 13px;
}

.equipment-details {
  margin-bottom: 8px;
}

.equipment-category {
  font-size: 12px;
  color: var(--text-color-3);
  margin-bottom: 2px;
}

.equipment-desc {
  font-size: 11px;
  color: var(--text-color-3);
  line-height: 1.3;
}

.price-info {
  margin-bottom: 4px;
}

.current-price {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
}

.price-value {
  font-weight: 600;
  color: var(--primary-color);
}

.size-small .price-value {
  font-size: 13px;
}

.no-price-data {
  font-size: 10px;
  color: var(--error-color);
}

.price-change {
  font-size: 11px;
}

.change-value {
  font-weight: 500;
}

.price-increase {
  color: var(--error-color);
}

.price-decrease {
  color: var(--success-color);
}

.price-stable {
  color: var(--text-color-3);
}

.physical-attrs {
  margin-top: 8px;
}

.type-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  opacity: 0.6;
}

.equipment-weapon {
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.1), transparent);
}

.equipment-accessory {
  background: linear-gradient(135deg, rgba(78, 205, 196, 0.1), transparent);
}

.equipment-helmet, .equipment-armor {
  background: linear-gradient(135deg, rgba(69, 183, 209, 0.1), transparent);
}

.equipment-backpack, .equipment-chest_rig {
  background: linear-gradient(135deg, rgba(254, 202, 87, 0.1), transparent);
}

@media (max-width: 768px) {
  .equipment-item {
    gap: 8px;
    padding: 8px;
  }
  
  .equipment-name {
    font-size: 13px;
  }
  
  .price-value {
    font-size: 12px;
  }
}
</style>